<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js" type="application/javascript"></script>
</head>
<body>
<div id="app">
    <p v-if="ok">
        v-if指令，当ok为true时，显示此段内容
    </p>
    <p v-else>
        v-else指令，当ok为false时，显示此段内容
    </p>
    <p v-show="ok">
        v-show指令，当ok为true时，显示此段内容
    </p>
    <p v-if="type === 'A'">
        v-if指令，当type为A时，显示A
    </p>
    <p v-else-if="type === 'B'">
        v-if指令，当type为B时，显示B
    </p>
    <p v-else-if="type === 'C'">
        v-if指令，当type为C时，显示C
    </p>
    <p v-else>
        v-else指令，显示为D
    </p>

    <span v-bind:title="message">
        v-bind指令，鼠标悬停显示title
    </span>


    {{message}}

    <ol v-for="(item, index) in items">
        <li>{{index}} {{item.message}}</li>
    </ol>
</div>

<script>
var vm  = new Vue({
    el:"#app",
    data : {
        message:"Hello, Vue.js",
        ok: true,
        type: "A",
        items: [
            {message: 'Foo'},
            {message: 'Bar'}
        ]
    }
});
</script>
</body>
</html>